<template>
    <div>
        <h-section title="需求管理情况" collapse>
            <flexbox class="tip-cont" v-if="detail.dataSource === '外部' && !isNoData && hasAuth">
                <ExclamationCircleOutlined />
                <span class="margin-l-8">{{ `请填写${detail.reportPeriod}新增的业务方提出需求总数和${detail.reportPeriod}新增的功能点总数` }}</span>
            </flexbox>
            <require-info-table ref="requireInfoTableRef" :list="detail.requireInfos" :detail="detail" :hasAuth="hasAuth" :isNoData="isNoData" />
        </h-section>

        <h-section collapse>
            <template #title>
                <flexbox>
                    <span>{{ `${detail.reportPeriod}已发布版本` }}</span>
                    <a-tooltip title="按照预发布版本的【上线日期】在时间段内统计">
                        <QuestionCircleOutlined class="margin-l-8" />
                    </a-tooltip>
                </flexbox>
            </template>
            <release-version-table ref="releaseVersionTableRef" :list="detail.releaseVersion" :detail="detail" :hasAuth="hasAuth" :isNoData="isNoData">
                <flexbox class="tip-cont" v-if="detail.dataSource === '外部'">
                    <ExclamationCircleOutlined />
                    <span class="margin-l-8">{{ `请填写上线日期在${detail.reportPeriod}期间的版本` }}</span>
                </flexbox>
            </release-version-table>
        </h-section>

        <h-section collapse>
            <template #title>
                <flexbox>
                    <span>进行中版本</span>
                    <a-tooltip title="按照预发布版本的【创建时间】在时间段内统计">
                        <QuestionCircleOutlined class="margin-l-8" />
                    </a-tooltip>
                </flexbox>
            </template>
            <process-version-table ref="processVersionTableRef" :list="detail.processVersion" :releaseVersionList="releaseVersionList" :unOnlineVersionList="unOnlineVersionList" :detail="detail" :hasAuth="hasAuth" :isNoData="isNoData">
                <flexbox class="tip-cont" v-if="detail.dataSource === '外部'">
                    <ExclamationCircleOutlined />
                    <span class="margin-l-8">请填写截至统计时间所有在进行中的版本</span>
                </flexbox>
            </process-version-table>
        </h-section>

        <h-section collapse>
            <template #title>
                <flexbox>
                    <span>进行中延期版本</span>
                    <a-tooltip title="截止报告生成时间，计划上线日期已过，但流程仍未走完的版本将被视为进行中延期">
                        <QuestionCircleOutlined class="margin-l-8" />
                    </a-tooltip>
                </flexbox>
            </template>
            <un-online-version-table ref="unOnlineVersionTableRef" :list="detail.processOverDueVersion" :detail="detail" :hasAuth="hasAuth" :isNoData="isNoData">
                <flexbox class="tip-cont" v-if="detail.dataSource === '外部'">
                    <ExclamationCircleOutlined />
                    <span class="margin-l-8">请填写截至统计时间，仍在进行中的但已延期的版本</span>
                </flexbox>
            </un-online-version-table>
        </h-section>
    </div>
</template>

<script lang="ts">
import { RequireInfoTable, ReleaseVersionTable, ProcessVersionTable, UnOnlineVersionTable } from './components/index';
import { QuestionCircleOutlined, ClockCircleOutlined, CloseCircleOutlined, CheckCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { useRouterApi } from '@/hooks/common/useRouterApi';
import { defineComponent, ref, unref, reactive, toRefs, computed, nextTick } from 'vue';
export default defineComponent({
    components: {
        QuestionCircleOutlined,
        ClockCircleOutlined,
        CloseCircleOutlined,
        CheckCircleOutlined,
        ExclamationCircleOutlined,
        RequireInfoTable,
        ReleaseVersionTable,
        ProcessVersionTable,
        UnOnlineVersionTable
    },
    props: {
        hasAuth: {
            type: Boolean,
            default: false
        },
        detail: {
            type: Object,
            default: () => ({})
        },
        isNoData: {
            type: Boolean,
            default: false
        }
    },
    setup(_, { emit }) {
        const requireInfoTableRef = ref<any>();
        const releaseVersionTableRef = ref<any>();
        const processVersionTableRef = ref<any>();
        const unOnlineVersionTableRef = ref<any>();
        const ZhuanbanModalRef = ref<any>();
        const { handleBack, route } = useRouterApi({
            backQuery: {
                path: '/energyManage/analysisReport'
            }
        });
        const state = reactive<any>({});
        // 已发布版本
        const releaseVersionList = computed(() => {
            return unref(releaseVersionTableRef) ? [...unref(releaseVersionTableRef).newList] : [];
        });
        // 已发布延期版本
        const unOnlineVersionList = computed(() => {
            return unref(unOnlineVersionTableRef) ? [...unref(unOnlineVersionTableRef).newList] : [];
        });
        const validate = async () => {
            return await Promise.all([unref(requireInfoTableRef).validate(), unref(releaseVersionTableRef).validate(), unref(processVersionTableRef).validate(), unref(unOnlineVersionTableRef).validate()]);
        };
        const getList = () => {
            return [...unref(requireInfoTableRef).newList, ...unref(releaseVersionTableRef).newList, ...unref(processVersionTableRef).newList, ...unref(unOnlineVersionTableRef).newList];
        };
        return {
            ...toRefs(state),
            handleBack,
            requireInfoTableRef,
            releaseVersionTableRef,
            processVersionTableRef,
            unOnlineVersionTableRef,
            ZhuanbanModalRef,
            validate,
            getList,
            releaseVersionList,
            unOnlineVersionList
        };
    }
});
</script>
<style scoped lang="less">
.page-wrap {
    height: 100%;
    position: relative;
    .page-cont {
        background: #fff;
        .btn-group {
            margin: 24px 0;
            button + button {
                margin-left: 8px;
            }
        }
        .tip-cont {
            color: #d46b08;
            background: #fff7e6;
            border-color: #ffd591;
            padding: 6px 12px;
            font-size: 14px;
        }
    }
}
// 去掉表头颜色
::v-deep(.ant-table-thead) > tr > th {
    background: #eaf5fe !important;
    font-weight: 400;
    color: @primary-color;
}
::v-deep(.ant-divider) {
    border-top: 2px solid #eaf5fe;
}
</style>